<template>
  <view class="main">
    <view class="user-head">
      <u-avatar
        level-size="90"
        level-icon="../../../static/img/community/ic_daka.png"
        :show-level="baseInfo.starFlag === '1'"
        mode="circle"
        :src="`${$store.state.img_url}${baseInfo.avatar}`"
        img-mode="aspectFill"
      >
      </u-avatar>
      <view class="user-name">{{ baseInfo.nickName }}</view>
    </view>
    <view class="post-title">{{ baseInfo.title }}</view>
    <view class="post-date">{{ baseInfo.sendTime }}</view>

    <view class="divider"></view>
    <view class="report-title">选择打赏金额</view>

    <view class="reward-list" title-bg-color="rgb(243, 244, 246)">
      <view
        class="reward-list__item"
        v-for="(item, index) in [1, 2, 5, 10, 20, 50]"
      >
        <view
          @click="clkItem(item)"
          :class="
            selectedRMB == item
              ? 'reward-list__item-content-active'
              : 'reward-list__item-content'
          "
          >{{ item }}元
        </view>
      </view>
      <view class="reward-list__item">
        <view
          @click="clkItem(-1)"
          :class="
            userInput
              ? 'reward-list__item-content-active'
              : 'reward-list__item-content'
          "
          >其他金额</view
        >
      </view>
      <view v-if="userInput" class="reward-list__item">
        <view class="reward-list__item-content">
          <input
            :focus="userInput"
            v-model="inputRMB"
            type="digit"
            maxlength="4"
          />
        </view>
      </view>
    </view>

    <view class="wrap-pay">
      <view class="wrap-pay__text1">打赏金额 </view>
      <view class="wrap-pay__text2">{{ dashangRMB }}元</view>
      <view class="wrap-pay__gap"></view>
      <view
        @click="onConfirm"
        :class="
          dashangRMB > 0 ? 'wrap-pay__btn-pay-active' : 'wrap-pay__btn-pay'
        "
        >支付</view
      >
    </view>

    <view class="dialog-container">
      <u-top-tips ref="uTips"></u-top-tips>
    </view>
  </view>
</template>

<script>
import apis from "@/apis.js";
export default {
  data() {
    return {
      selectedRMB: 0,
      inputRMB: null,
      userInput: false,
      itemData: {
        isVip: true,
        title: "王主任",
        postTitle: "临床病理入门讲座",
        dataStr: "2021年9月15日 15:12",
      },
      baseInfo: {},
      reportList: [],
    };
  },
  methods: {
    onConfirm() {
      if (!this.dashangRMB) {
        return false;
      }
      if (Number(this.dashangRMB) > 1000) {
        uni.showToast({
          title: "最大打赏金额不可超过1000",
          icon: "none",
        });
        return;
      }
      this.$http
        .post(`${apis.reward_report_add}`, {
          artId: this.baseInfo.id,
          rewardAmount: this.dashangRMB,
          paySouc: "gzh",
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.remark = "";
            let data = res.data.result;
            if (data && data.appid) {
              WeixinJSBridge.invoke(
                "getBrandWCPayRequest",
                {
                  appId: data.appid, //公众号ID，由商户传入
                  timeStamp: data.timeStamp, //时间戳，自1970年以来的秒数
                  nonceStr: data.nonce_str, //随机串
                  package: data.packageStr,
                  signType: data.signType, //微信签名方式：
                  paySign: data.sign, //微信签名
                },
                function (res) {
                  if (res.err_msg == "get_brand_wcpay_request:ok") {
                    // 使用以上方式判断前端返回,微信团队郑重提示：
                    //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                    uni.showToast({
                      title: "打赏成功",
                      icon: "none",
                    });
                  }
                }
              );
            } else {
              uni.showToast({
                title: "打赏成功",
                icon: "none",
              });
            }
            // window.location.href = res.data.result.codeUrl
            // window.open(res.data.result.codeUrl)
            // this.$refs.uTips.show({
            // 	title: '打赏成功',
            // 	type: 'success',
            // 	duration: '2300'
            // })
          } else {
            this.$refs.uTips.show({
              title: "取消",
              type: "success",
              duration: "2300",
            });
          }
        });
    },
    getList() {
      this.loadStatus = "loading";
      this.$http.get(`${apis.article_detail}/${this.id}`).then((res) => {
        if (res.data.code === 200) {
          this.baseInfo = res.data.result;
          this.baseInfo.subjectType = res.data.result.subjectType
            ? res.data.result.subjectType
            : "";
        }
      });
    },
    clkItem(item) {
      if (item > 0) {
        this.selectedRMB = item;
        this.userInput = false;
        this.inputRMB = null;
      } else {
        this.userInput = true;
        this.selectedRMB = 0;
      }
    },
    clkReport(id) {
      this.showEditDialog = true;
    },

    cancelEditFolder() {
      console.log("cancel");
      // this.folderName = ''
    },
    confirmEditFolder(index) {
      let action = true;
      if (action) {
        this.$refs.uTips.show({
          title: "举报成功",
          type: "success",
          duration: "2300",
        });
      } else {
        this.$refs.uTips.show({
          title: "取消",
          type: "success",
          duration: "2300",
        });
      }
    },
  },
  computed: {
    dashangRMB() {
      if (this.selectedRMB > 0) {
        return this.selectedRMB;
      }
      if (this.inputRMB > 0) {
        return this.inputRMB;
      }

      return 0;
    },
  },
  onShow() {
    this.id = this.$route.query.id;
    console.log("onshow", this.$route);
    uni.setNavigationBarTitle({
      title: "打赏",
    });
    this.getList();
  },
};
</script>

<style scoped lang="scss">
	@import "uview-ui/index.scss";
.main {
  .wrap-pay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    width: 100wh;
    // background-color: red;
    border-top: 4rpx solid #3fa7ff;

    &__text1 {
      font-size: 38rpx;
      font-family: SimHei;
      margin-left: 29rpx;
      font-weight: 400;
      color: #4d5b80;
      opacity: 1;
    }

    &__text2 {
      font-size: 62rpx;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: $text-color;
      margin-left: 50rpx;
      opacity: 1;
    }

    &__gap {
      flex-grow: 1;
    }

    &__btn-pay-active {
      align-self: flex-end;
      width: 287rpx;
      height: 100%;
      background: #3fa7ff;
      box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.16);
      opacity: 1;

      text-align: center;
      font-size: 46rpx;
      font-family: SimHei;
      font-weight: 400;
      line-height: 142rpx;
      color: #e9ebf4;
    }

    &__btn-pay {
      @extend .wrap-pay__btn-pay-active;
      background: #bfbfbf;
      color: #e9ebf4;
    }
  }

  .reward-list {
    margin-top: 40rpx;
    display: flex;
    flex-flow: row wrap;

    &__item {
      flex: 0 0 33.3333%;
    }

    &__item-content {
      margin-bottom: 23rpx;
      text-align: center;
      justify-content: center;
      width: 192rpx;
      padding: 15rpx 0;

      background: #ffffff;
      border: 2rpx solid #21d2ff;
      box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.16);
      opacity: 1;
      border-radius: 4rpx;

      font-size: 31rpx;
      font-family: SimHei;
      font-weight: 400;
      line-height: 40rpx;
      color: #4d5b80;
      opacity: 1;
    }

    &__item-content-active {
      @extend .reward-list__item-content;
      background: #21d2ff;
      color: #ffffff;
    }
  }

  .report-title {
    margin-top: 31rpx;
    font-size: 31rpx;
    font-family: SimHei;
    font-weight: 400;
    line-height: 40rpx;
    color: #4d5b80;
    opacity: 1;
  }

  .divider {
    width: 100%;
    height: 0px;
    margin-top: 29rpx;
    border: 1.5rpx solid #bfbfbf;
    opacity: 1;
  }

  .post-title {
    margin-left: 11rpx;
    margin-top: 17rpx;
    font-size: 23rpx;
    font-family: SimHei;
    font-weight: 400;
    line-height: 31rpx;
    color: #000000;
    opacity: 1;
  }

  .post-date {
    margin-left: 11rpx;
    margin-top: 17rpx;
    font-size: 23rpx;
    font-family: SimHei;
    font-weight: 400;
    line-height: 31rpx;
    color: #949494;
    opacity: 1;
  }

  .user-name {
    margin-top: 28rpx;
    margin-left: 30rpx;
    font-size: $title-font;
    font-family: Source Han Sans CN;
    font-weight: 500;
    line-height: 38rpx;
    color: #4d5b80;
    opacity: 1;
  }

  .user-head {
    display: flex;
  }

  display: flex;
  flex-flow: column nowrap;
  padding: 35rpx 29rpx;
}
</style>

<style lang='scss' scoped>
.diag-input-container {
  display: flex;
  flex-flow: column nowrap;
  font-size: 31rpx;
  color: $u-content-color;
  padding: 20rpx 40rpx 20rpx;

  .diag-field {
    width: auto;
    text-align: left;
    margin-top: 25rpx;

    padding: 20rpx;
    height: 192rpx;
    background: #ffffff;
    border: 2rpx solid #4d5b80;
    opacity: 1;
    border-radius: 8rpx;
  }

  text {
    margin-top: 9rpx;
    margin-right: 16rpx;
    align-items: center;
    text-align: right;
  }
}
</style>
